<template>
	<view class="receive-detail">
		<!-- 顶部状态 -->
		<view class="detail-title" v-if="showDetail">
			<view class="img-left">
				<image src="/static/img/store.png" mode=""></image>
			</view>
			<view class="status-section">
				<view class="status-text">{{list.title}}</view>
				<view class="status-desc">共{{list.gift_total_num}}份礼包/{{list.gift_use_num}}人已领</view>
			</view>
		</view>
		<view class="gift-claimed-message" v-else>
			<view class="message-text">
				{{msg}}
			</view>
		</view>
		<view class="" v-if="giftorderlist.length>0">
			<view class="gift-list-item" v-for="(item,index) in giftorderlist" :key="index">
				<!-- 用户信息 -->
				<view class="user-section">
					<image class="user-avatar" :src="item.headimg"></image>
					<text class="user-name">{{ item.nickname }}</text>
					<text class="status-tag">已领取你的礼物</text>
				</view>

				<!-- 礼品信息 -->
				<view class="gift-section">
					<view class="gift-item">
						<image class="gift-image" :src="item.prolist[0].pic" mode="aspectFill"></image>
						<view class="gift-info">
							<view class="gift-title">{{ item.prolist[0].name  }}</view>
							<view class="gift-desc">{{ item.prolist[0].ggname }}</view>
							<view class="gift-style">
								<view class="gift-price">¥{{ item.prolist[0].totalprice }}</view>
								<view class="gift-count">x{{ item.prolist[0].num  }}</view>
							</view>
						</view>
					</view>

					<!-- 预售信息 -->
					<view class="presale-info">
						<!-- <text class="presale-tag">预售</text> -->
						<text class="presale-text">{{item.tips}}</text>
					</view>
				</view>

				<!-- 操作按钮 -->
				<view class="action-buttons">
					<view class="">
						<button class="action-btn urge" @tap="urgeDelivery(item)">催发货</button>
					</view>
					<!-- <button class="action-btn cart" @tap="addToCart">加入购物车</button> -->
				</view>

				<!-- 订单信息 -->
				<view class="order-info">
					<view class="info-item">
						<view class="info-left">订单编号：</view>
						<view class="">
							<text class="value">{{ item.ordernum }}</text>
							<text class="copy-btn" @tap="copyOrderNo(item)">复制</text>
						</view>
					</view>
					<view class="info-item">
						<view class="info-left">订单状态：</view>
						<view>{{item.status_txt}}</view>

					</view>
					<view class="info-item">
						<view class="info-left">物流信息：</view>
						<view class="btn2" @tap="logistics(item)">查看物流</view>

					</view>

				</view>
				<view class="action-buttons" v-if="item.status != 1">
					<view class="">
						<button class="action-btn urge" @tap="goto" :data-url="'refundSelect?orderid=' + opt.id">申请退款</button>
					</view>
				</view>
			</view>
		</view>
		<view class="gift-not-received" v-else>
			<image :src="getGiftImage(gift_set.gift_type)" mode=""></image>
		</view>
	</view>
</template>

<script>
	var app = getApp()

	export default {
		data() {
			return {
				opt: {},
				loading: false,
				isload: false,
				list: [],
				giftorderlist: [],

				detail: "",
				payorder: {},
				prolist: "",
				shopset: "",
				storeinfo: "",
				lefttime: "",
				title: '',
				pic: "",
				url: '',
				gift_set: '',
				msg:"",
				showDetail: true   
			}
		},
		onShareAppMessage() {
			const {
				id,
				aid,
				ordernum
			} = this.opt;
			const title = this.title
			const pic = this.pic
			const url = this.url
			return {
				title: title, // 全局分享标题
				path: url, // 分享路径
				imageUrl: pic, // 分享图片
			};
		},
		onLoad(opt) {
			this.opt = app.getopts(opt);

			this.getdata();
		},
		onPullDownRefresh: function() {
			this.getdata();
		},

		methods: {
			getdata: function() {
				var that = this;
				that.loading = true;
				app.post('order/getAcceptGiftList', {
					orderid: that.opt.id,
					aid: that.opt.aid,
					ordernum: that.opt.ordernum
				}, function(res) {
					that.loading = false;
					if(res.status == 200){
						that.list = res.data.topdata
						that.giftorderlist = res.data.giftorderlist
						that.pic = res.data.share.pic
						that.title = res.data.share.title
						that.url = res.data.share.url
						that.gift_set = res.data.gift_set
						that.showDetail = true; 
					}else{
						that.msg = res.msg
						that.showDetail = false; 
						app.error(res.msg)
					}

				});
			},
			getGiftImage(giftType) {
				let gift_is_secret = this.opt.gift_is_secret
				if (gift_is_secret == 1) {
					return this.gift_set.secretpic; // 神秘礼物类型1对应的图片路径
				} else if (gift_is_secret == 2) {
					return this.gift_set.acceptstatuspic; // 公开礼物类型2对应的图片路径
				} 
			},
			logistics(item) {
				
				let express_com = item.express_com
				let express_no = item.express_no
				let id = item.id
				if (express_com == null || express_no == null) {
				        uni.showToast({
				            title: '请等待揽收',
				            icon: 'none'
				        });
				        return; 
				    }
				app.goto('/pagesExt/order/logistics?express_com=' + express_com + '&express_no=' + express_no + '&id=' + id);

			},
			// 复制订单号
			copyOrderNo(item) {

				uni.setClipboardData({
					data: item.ordersn,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						})
					}
				})
			},

			// 催发货
			urgeDelivery(item) {
				// uni.showToast({
				// 	title: '已通知商家尽快发货',
				// 	icon: 'none'
				// })

				let aid = this.opt.aid
				let orderid = this.opt.id
				let ordernum = this.opt.ordernum

				app.post('order/urgeShipMent', {
					aid: aid,
					orderid: orderid,
					ordernum: ordernum,
				}, function(res) {
					app.showLoading(false);
					if (res.status == 200) {
						uni.showModal({
							title: '提示',
							content: res.msg,
						})
						return;
						//that.showsuccess(res.data.msg);

					} else {
						app.error(res.msg);

						return;
					}


				});
			},

			// 加入购物车
			addToCart() {
				uni.showToast({
					title: '已加入购物车',
					icon: 'success'
				})
			},

			// 申请退款
			applyRefund() {
				uni.navigateTo({
					url: '/pages/refund/apply'
				})
			}
		}
	}
</script>

<style>
	.receive-detail {
		min-height: 100vh;
		background: #f5f5f5;
		padding: 20rpx;
	}

	.status-section {

		padding: 20rpx;
		/* text-align: center; */

	}

	.gift-icon {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 20rpx;
	}

	.status-text {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
		display: block;
	}

	.status-desc {
		font-size: 26rpx;
		opacity: 0.8;
		color: #c16412;
	}

	.user-section {
		background: #fff;
		padding: 30rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #eee;
	}

	.user-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.user-name {
		font-size: 28rpx;
		color: #333;
		flex: 1;
	}

	.status-tag {
		font-size: 24rpx;
		color: #999;
	}

	.gift-section {
		background: #fff;
		padding: 30rpx;

	}

	.gift-item {
		display: flex;

	}

	.gift-image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
	}

	.gift-info {
		flex: 1;
	}

	.gift-title {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 10rpx;
	}

	.gift-desc {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.gift-price {
		font-size: 32rpx;
		color: #ff6b81;
		font-weight: bold;
	}

	.gift-count {
		font-size: 26rpx;
		color: #999;
		margin-left: 10rpx;
	}

	.presale-info {
		background: #f8f8f8;
		padding: 20rpx;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}

	.presale-tag {
		font-size: 24rpx;
		color: #ff6b81;
		border: 1rpx solid #ff6b81;
		padding: 2rpx 10rpx;
		border-radius: 4rpx;
		margin-right: 10rpx;
	}

	.presale-text {
		font-size: 26rpx;
		color: #666;
	}

	.action-buttons {
		display: flex;
		justify-content: flex-end;
		gap: 10px;
		padding: 20rpx;
		background: #fff;

	}

	.action-btn {
		width: 300rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 40rpx;
		font-size: 28rpx;
	}

	.action-btn.urge {
		background: #f5f5f5;
		color: #666;
	}

	.action-btn.cart {
		background: #4CD964;
		color: #fff;
	}

	.order-info {
		background: #fff;
		padding: 0 30rpx;
	}

	.info-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.info-item:last-child {
		border-bottom: none;
	}

	.label {
		font-size: 28rpx;
		color: #999;
		width: 160rpx;
	}

	.value {
		flex: 1;
		font-size: 28rpx;
		color: #333;
	}

	.copy-btn {
		font-size: 26rpx;
		color: #4CD964;
		margin-left: 20rpx;
	}

	.arrow {
		font-size: 28rpx;
		color: #999;
	}

	.bottom-button {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 20rpx;
		background: #fff;
	}

	.refund-btn {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: #f5f5f5;
		color: #666;
		font-size: 32rpx;
		border-radius: 44rpx;
	}

	.gift-style {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.img-left {
		width: 60rpx;
		height: 60rpx;
	}

	.img-left image {
		width: 100%;
		height: 100%;
	}

	.detail-title {
		display: flex;
		align-items: center;
	}

	.gift-list-item {
		margin-bottom: 20rpx;
	}

	.info-left {
		color: #ccc;
	}

	.gift-not-received {
		width: 100%;
		height: 600rpx;
	}

	.gift-not-received image {
		width: 100%;
		height: 100%;
	}

	.btn2 {
		margin-left: 20rpx;
		margin-top: 10rpx;
		max-width: 160rpx;
		height: 60rpx;
		line-height: 60rpx;
		color: #333;
		background: #fff;
		border: 1px solid #cdcdcd;
		border-radius: 3px;
		text-align: center;
		padding: 0 20rpx;
	}
	.gift-claimed-message {
		text-align: center;
	
	}
	
	.message-text {
		font-size: 16px;
		font-weight: bold;
		color: #ff4d4f;
		letter-spacing: 1px;
	}
</style>
